<%--
  Created by IntelliJ IDEA.
  User: 34005
  Date: 2024/12/7
  Time: 14:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>添加书本</title>
</head>
<style>
    form {
        width: 400px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 5px;
    }
    input[type="text"], input[type="date"], input[type="file"] {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
    }
    input[type="submit"] {
        width: 100%;
        padding: 10px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: #45a049;
    }
    .bookCover{
        width: 100px;
        height: 100px;
    }
</style>
<body>
<form action="addBook" method="post" enctype="multipart/form-data">
    书名 <input type="text" name="bookName" required><br>
    书类型 <input type="text" name="bookType" required><br>
    作者  <input type="text" name="writerName" required><br>
    价格  <input type="text" name="bookPrice" required><br>
    出版时间 <input type="date" name="pubDate" required><br>
    书封面 <input type="file" name="avatar" id="imageInput"> <img src="" alt="" class="bookCover" id="bookCover">
    <input type="submit" value="添加">${msg}
</form>
</body>
<script>
    document.getElementById('imageInput').addEventListener('change', function(event) {
        let file = event.target.files[0];
        let reader = new FileReader();
        reader.onload = function(e) {
            document.getElementById('bookCover').src = e.target.result;
        };
        reader.readAsDataURL(file);
    });
</script>
</html>
